<!-- JS实现监听SKU -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="r0DIGSA1Hb8fJZYQh3fToCSk1qiczKffgRK1aUYm">
    <title>好好好 - 二手物品交易系统</title>
    <!-- 样式 -->
    <link href="/css/app.css?id=4c2e9f03a0e67c857b93" rel="stylesheet">
</head>
<body>
    <div id="app" class="products-show-page">
        <nav class="navbar navbar-default navbar-static-top navbar-orange">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand navbar-font" href="http://oldgoodstrade.test">
              <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                二手数码交易
            </a>
        </div>
        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <ul class="nav navbar-nav">
              <li>
                  <a href="#" class="navbar-font">网站特点</a>
              </li>
              <li>
                  <a href="#" class="navbar-font">联系我们</a>
              </li>
              <li>
                  <a href="#" class="navbar-font">FAQ</a>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a id="ranklist" href="#" class="dropdown-toggle navbar-font" data-toggle="dropdown" role="button" aria-expanded="false">排行榜</a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="http://oldgoodstrade.test/rankingsale">销量排行</a>
                        </li>
                        <li>
                            <a href="http://oldgoodstrade.test/rankingpoint">评分排行</a>
                        </li>
                    </ul>
                </li>
                <!-- 登录注册链接开始 -->
                                    <li><a href="http://oldgoodstrade.test/login" class="navbar-font">登录</a></li>
                    <li><a href="http://oldgoodstrade.test/register" class="navbar-font">注册</a></li>
                                <!-- 登录注册链接结束 -->
            </ul>
        </div>
    </div>
</nav>
        <div class="container">
            <div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="panel panel-default">
  <div class="panel-body product-info">
    <div class="row">
      <div class="col-sm-5">
        <img class="cover" src="https://iocaffcdn.phphub.org/uploads/images/201806/01/5320/82Wf2sg8gM.jpg" alt="">
      </div>
      <div class="col-sm-7">
        <div class="title">好好好</div>
        <div class="price"><label>价格</label><em>￥</em><span>737.00</span></div>
        <div class="sales_and_reviews">
          <div class="sold_count">累计销量 <span class="count">1525</span></div>
          <div class="review_count">累计评价 <span class="count">0</span></div>
          <div class="rating" title="评分 2">评分 <span class="count">★★☆☆☆</span></div>
        </div>
        <div class="skus">
          <label>选择</label>
          <div class="btn-group" data-toggle="buttons">
                          <label
                  class="btn btn-default sku-btn"
                  data-price="5389.00"
                  data-stock="56165"
                  data-toggle="tooltip"
                  title="&lt;p&gt;一款很好的产品&lt;/p&gt;"
                  data-placement="bottom">
                <input type="radio" name="skus" autocomplete="off" value="1"> 好好好
              </label>
                          <label
                  class="btn btn-default sku-btn"
                  data-price="1516.00"
                  data-stock="93178"
                  data-toggle="tooltip"
                  title="&lt;p&gt;一款很好的产品&lt;/p&gt;"
                  data-placement="bottom">
                <input type="radio" name="skus" autocomplete="off" value="2"> 好好好
              </label>
                          <label
                  class="btn btn-default sku-btn"
                  data-price="737.00"
                  data-stock="14380"
                  data-toggle="tooltip"
                  title="&lt;p&gt;一款很好的产品&lt;/p&gt;"
                  data-placement="bottom">
                <input type="radio" name="skus" autocomplete="off" value="3"> 好好好
              </label>
                      </div>
        </div>
        <div class="cart_amount"><label>数量</label><input type="text" class="form-control input-sm" value="1"><span>件</span><span class="stock"></span></div>
        <div class="buttons">
                      <button class="btn btn-success btn-favor">❤ 收藏</button>
                    <button class="btn btn-primary btn-add-to-cart">加入购物车</button>
        </div>
      </div>
    </div>
    <div class="product-detail">
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#product-detail-tab" aria-controls="product-detail-tab" role="tab" data-toggle="tab">商品详情</a></li>
        <li role="presentation"><a href="#product-reviews-tab" aria-controls="product-reviews-tab" role="tab" data-toggle="tab">用户评价</a></li>
      </ul>
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="product-detail-tab">
          <!-- 产品属性开始 -->
          <div class="properties-list">
            <div class="properties-list-title">产品参数：</div>
            <ul class="properties-list-body">
                          </ul>
          </div>
          <!-- 产品属性结束 -->
          <div class="product-description">
            <p>一款很好的产品产品</p>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="product-reviews-tab">
          <!-- 评论列表开始 -->
        <table class="table table-bordered table-striped">
          <thead>
          <tr>
            <td>用户</td>
            <td>商品</td>
            <td>评分</td>
            <td>评价</td>
            <td>时间</td>
          </tr>
          </thead>
          <tbody>
                      </tbody>
        </table>
        <!-- 评论列表结束 -->
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>
        </div>
        <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <p><span class="glyphicon glyphicon-envelope">给我们建议</p>
          <p><span class="glyphicon glyphicon-pencil">Terms of use</p>
        </div>
        <div class="col-sm-6 text-right">
          <p>由一辩必过组用<span class="glyphicon glyphicon-heart"></span>编码和设计</p>
          <p>© 一辩必过 - All rights reserved</p>
        </div>
      </div>
    </div>
</footer>
    </div>
    <!-- JS 脚本 -->
    <script src="/js/app.js?id=15bb7e40966865974b1d"></script>
    <script>
  $(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'});
    $('.sku-btn').click(function () {
      $('.product-info .price span').text($(this).data('price'));
      $('.product-info .stock').text('库存：' + $(this).data('stock') + '件');
    });

     /*监听收藏按钮的点击事件*/
    $('.btn-favor').click(function () {
      // 发起一个 post ajax 请求，请求 url 通过后端的 route() 函数生成。
      axios.post('http://oldgoodstrade.test/products/1/favorite')
        .then(function () { // 请求成功会执行这个回调
          swal('操作成功', '', 'success')
          .then(function () {
            location.reload();  //刷新页面按钮状态
          });
        }, function(error) { // 请求失败会执行这个回调
          // 如果返回码是 401 代表没登录
          if (error.response && error.response.status === 401) {
            swal('请先登录', '', 'error');
          } else if (error.response && error.response.data.msg) {
            // 其他有 msg 字段的情况，将 msg 提示给用户
            swal(error.response.data.msg, '', 'error');
          }  else {
            // 其他情况应该是系统挂了
            swal('系统错误', '', 'error');
          }
        });
    });
    /*取消收藏*/
    $('.btn-disfavor').click(function () {
      axios.delete('http://oldgoodstrade.test/products/1/favorite')
        .then(function () {
          swal('操作成功', '', 'success')
            .then(function () {
              location.reload();  //刷新页面按钮状态
            });
        });
    });

    // 加入购物车按钮点击事件
    $('.btn-add-to-cart').click(function () {
      // 请求加入购物车接口
      axios.post('http://oldgoodstrade.test/cart', {
        sku_id: $('label.active input[name=skus]').val(),
        amount: $('.cart_amount input').val(),
      })
        .then(function () { // 请求成功执行此回调
          swal('加入购物车成功', '', 'success')
          .then(function() {
          location.href = 'http://oldgoodstrade.test/cart';
        });
        }, function (error) { // 请求失败执行此回调
          if (error.response.status === 401) {

            // http 状态码为 401 代表用户未登陆
            swal('请先登录', '', 'error');

          } else if (error.response.status === 422) {

            // http 状态码为 422 代表用户输入校验失败
            var html = '<div>';
            _.each(error.response.data.errors, function (errors) {
              _.each(errors, function (error) {
                html += error+'<br>';
              })
            });
            html += '</div>';
            swal({content: $(html)[0], icon: 'error'})
          } else {

            // 其他情况应该是系统挂了
            swal('系统错误', '', 'error');
          }
        })
    });
  });
</script>
    <script>
      $(document).ready(function() {
        //排行榜移入移出
        var $dropdownLi = $('li.dropdown');
        $dropdownLi.mouseenter(function() {
        $(this).addClass('open');
      }).mouseleave(function() {
        $(this).removeClass('open');
      });
    });
    </script>
</body>
</html>
